<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
</head>

<body>
    <div id="app">
<!--
 这会抛出一个错误，因为属性 todo 此时
 没有在该实例上定义
-->
<!-- {{person}} -->
<template v-for="(todo,index) in person" :key="index">
    <ul>
        <li  v-if="!todo.isComplete">
            姓名：{{ todo.name }}
          </li>
    </ul>
</template>

    </div>
    <script>
        const {ref} =Vue
        const app = Vue.createApp({
            setup(props) {
                let person = Vue.ref([
            { id: 001, name: "jack", age: 18 ,isComplete:true},
            { id: 002, name: "tom", age: 20,isComplete:false },
            { id: 003, name: "mary", age: 28,isComplete:true },
          ]);
                return {
                    person,
                    
                }
            }
        }).mount("#app");
    </script>
</body>

</html>